<template>
  <div id="container">
    <div class="login-container">
      <h2>Login to 广发POC-任务调度增强平台</h2>

      <el-form ref="login_info" :model="login_info" label-width="0">
        <el-form-item>
          <el-input v-model="login_info.username" placeholder="Username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="login_info.password" placeholder="Password" show-password></el-input>
        </el-form-item>
        <el-form-item class="actions">
          <el-button size="medium" type="success" plain @click="userRegisterFormVisible = true">{{
            $t('message.userRegister') }}</el-button>
          <el-button size="medium" type="primary" @click="doLogin">{{ $t('message.login') }}</el-button>
        </el-form-item>
      </el-form>

      <!-- User registration dialog -->
      <el-dialog :title="$t('message.userRegister')" :visible.sync="userRegisterFormVisible" width="400px">
        <el-form :model="userRegisterForm" label-width="120px">
          <el-form-item label="账号">
            <el-input v-model="userRegisterForm.userAccount"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.newPassword')">
            <el-input type="password" v-model="userRegisterForm.userPassword" show-password></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.newPassword2')">
            <el-input type="password" v-model="userRegisterForm.checkPassword" show-password></el-input>
          </el-form-item>
          <el-form-item class="actions">
            <el-button type="primary" @click="registerUser">{{ $t('message.register') }}</el-button>
            <el-button @click="userRegisterFormVisible = false">{{ $t('message.cancel') }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>


<script>

export default {
  name: 'PowerJobThirdPartyLogin',
  data() {
    return {
      login_info: {
        username: '',
        password: '',
      },

      // 用户注册表单是否可见
      userRegisterFormVisible: false,
      // 用户注册表单对象
      userRegisterForm: {
        userAccount: '',
        userPassword: '',
        checkPassword: ''
      },

    };
  },
  methods: {
    doLogin() {
      this.innerDoLogin(this.login_info.username, this.login_info.password, true)
    },

    innerDoLogin(name, pwd, real_login) {
      let login_request = {
        userAccount: name,
        userPassword: pwd,
      }

      this.axios.post('/user/login', login_request).then(ret => {

        if (real_login) {
          const jwtToken = ret.data.token
          window.localStorage.setItem('Authorization', jwtToken);

          this.$router.push("/admin/app")
        }
      })
    },

    // 注册用户
    registerUser() {

      if (this.userRegisterForm.userPassword !== this.userRegisterForm.checkPassword) {
        alert('两次输入密码不一致!')
        return
      }

      const that = this;
      this.axios.post("/user/register", this.userRegisterForm).then(() => {
        that.userRegisterFormVisible = false;

        // that.innerDoLogin(that.userRegisterForm.username, that.userRegisterForm.password, false)

        // 直接登录一次，创建 广发POC-任务调度增强平台 的 USER 对象
        that.$message.success(this.$t('message.success'));

      }, () => {
        that.userRegisterFormVisible = false
      });
    }
  },

  mounted() {
  }
};
</script>

<style scoped>
#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-container {
  width: 360px;
  padding: 30px 25px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h2 {
  margin-bottom: 25px;
  font-weight: 500;
  color: #333;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-input {
  width: 100%;
  border-radius: 5px;
}

.actions {
  display: flex;
  justify-content: space-between;
}

.el-dialog {
  .el-input {
    width: 100%;
    border-radius: 5px;
  }

  .actions {
    display: flex;
    justify-content: space-between;
  }
}
</style>
